<template>
  <div class="member-manage">
    <div class="pickers border-bottom">
      <div class="search-wrapper">
        <input-search @click="updateSearchContent"></input-search>
      </div>
    </div>
    <relation-display></relation-display>
    <div class="account-info">
      <bill-board class="billboard-adjust">
        <div class="billboard-content">
          <div class="item border-right">
            <div class="title">直属会员</div>
            <div class="statistics">
              <span>{{getUserInfo.directMembers}}</span><span class="extra">人</span>
            </div>
          </div>
          <div class="item border-right">
            <div class="title">全部会员</div>
            <div class="statistics">
              <span>{{getUserInfo.totalMembers}}</span><span class="extra">人</span>
            </div>
          </div>
          <div class="item">
            <div class="title">团队余额</div>
            <div class="profit statistics">
              <span>{{getUserInfo.groupBalance}}</span><span class="extra">.00</span>
            </div>
          </div>
        </div>
      </bill-board>
    </div>
    <div class="orders">
      <table>
        <thead>
          <tr>
            <th v-for="item in tableHeadData" :key="item.id" :style="width(item.width)">
              {{item.name}}
            </th>
          </tr>
        </thead>
        <tbody @mouseleave="handleMouseLeave">
          <tr 
            v-for="(item, index) in members" 
            :key="item.userid" 
            @mouseenter="handleMouseEnter(index)" 
            :class="currentRowIndex == index ? 'active' : ''">
            <td>{{item.accountName}}<span v-if="index == 0" class="member-count highlight">队长</span><span class="member-count highlight" v-if="item.members.length > 0 && index !== 0">{{item.members.length}}人</span></td>
            <td>{{item.signupTime | formater}}</td>
            <td>{{formatterPercent(item.lotteryRefundRate)}}</td>
            <td>{{formatterPercent(item.agRefundRate)}}</td>
            <td class="relative">
              {{formatterPercent(item.chrownRefundRate)}}
              <div class="popover" v-show="currentRowIndex == index">
                <div class="contents">
                  <div class="top content">
                    <div class="item">
                      <span class="name">
                        用户名：
                      </span>
                      <span class="detail">
                        {{currentMemberDetail.accountName}}
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        账号类型：
                      </span>
                      <span class="detail">
                        {{currentMemberDetail.accountType == 'member' ? '会员': '代理'}}
                      </span>
                    </div>
                  </div>
                  <div class="middle content">
                    <div class="item">
                      <span class="name">
                        个人余额：
                      </span>
                      <span class="detail red">
                        {{currentMemberDetail.personalBalance}}
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        团队余额：
                      </span>
                      <span class="detail red">
                        {{currentMemberDetail.groupBalance}}
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        彩票返点：
                      </span>
                      <span class="detail">
                        {{formatterPercent(currentMemberDetail.lotteryRefundRate)}}
                        <span class="red">({{currentMemberDetail.lotteryRefund}})</span>
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        AG返点：
                      </span>
                      <span class="detail">
                        {{formatterPercent(currentMemberDetail.agRefundRate)}}
                        <span class="red">({{currentMemberDetail.agRefund}})</span>
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        皇冠返水：
                      </span>
                      <span class="detail">
                        {{formatterPercent(currentMemberDetail.chrownRefundRate)}}
                        <span class="red">({{currentMemberDetail.chrownRefund}})</span>
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        分红：
                      </span>
                      <span class="detail">
                        {{formatterPercent(currentMemberDetail.bonusRefundRate)}}
                        <span class="red">({{currentMemberDetail.bonusRefund}})</span>
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        日工资：
                      </span>
                      <span class="detail">
                        {{formatterPercent(currentMemberDetail.salaryRefundRate)}}
                        <span class="red">({{currentMemberDetail.salaryRefund}})</span>
                      </span>
                    </div>
                  </div>
                  <div class="bottom content">
                    <div class="item">
                      <span class="name">
                        注册时间：
                      </span>
                      <span class="detail">
                        {{currentMemberDetail.signupTime | formater}}
                      </span>
                    </div>
                    <div class="item">
                      <span class="name">
                        最后登陆：
                      </span>
                      <span class="detail">
                         {{currentMemberDetail.lastLogin | formater}}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </td>
            <td>{{formatterPercent(item.bonusRefundRate)}}</td>
            <td>{{formatterPercent(item.salaryRefundRate)}}</td>
            <td><span :class="item.personalBalance > 0 ? 'red' : ''">{{item.personalBalance}}</span></td>
            <td><span :class="item.groupBalance > 0 ? 'red' : ''">{{item.groupBalance}}</span></td>
            <td class="relative">
              <span class="" v-if="item.isLogin">在线</span><span v-else>{{item.lastLogin | formater}}</span>
              <span 
                class="editor hover-style" 
                v-show="currentRowIndex == index"
                @click="showMemberEditor(index)"
                >
                <i class="iconfont icontg_bianji"></i>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <load-more @click="handleLoadMore"></load-more>
    </div>
    <bc-modal v-show="showEditor">
      <edit-member 
        v-if="showEditor" 
        @close="hideMemberEditor" 
        @cancel="hideMemberEditor"
        :item="currentMemberDetail"
        @click="updateNewData"
        >
      </edit-member>
    </bc-modal>
  </div>
</template>
<script>
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
import InputSearch from '@/components/input-search/input-search'
import BillBoard from '@/components/base/bill-board/bill-board'
import LoadMore from '@/components/base/load-more/load-more'
import RelationDisplay from '@/components/relation-display/relation-display'
import BcModal from '@/components/base/bc-modal/bc-modal'
import EditMember from './edit-member-info'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    DropdownPicker,
    InputSearch,
    BillBoard,
    LoadMore,
    RelationDisplay,
    BcModal,
    EditMember
  },
  data() {
    return {
      tablist: [
        {
          id: 1,
          tabname: '全部'
        },
        {
          id: 2,
          tabname: '未开奖'
        },
        {
          id: 3,
          tabname: '已中奖'
        },
        {
          id: 4,
          tabname: '未中奖'
        },
        {
          id: 5,
          tabname: '撤单'
        },
        {
          id: 6,
          tabname: '系统撤单'
        },
        {
          id: 7,
          tabname: '其他'
        },
      ],
      // pc
      tabs: [
        {
          id: 1,
          tabName: '会员管理',
          component:'LotteryRecord'
        },
        {
          id: 2,
          tabName: '推广链接',
          component: ''
        }
      ],
      // pc头部
      activeIndex: 0,
      // 团队/个人
      activeSwitchIndex: 0,
      // 最近几天 
      activeRecentIndex: 0,
      page: 0,
      switchNames: [
        {
          id: 1,
          name: '团队',
        },
        {
          id: 2,
          name: '个人',
        }
      ],
      // 手机
      activeTabIndex: 0,

      // pc表格当前active的row
      currentRowIndex: -1,
      // pc表格当前member的详细信息
      currentMemberDetail: {},
      tableHeadData: [
        {
          id: 1,
          width: 140,
          name: '用户名/下线人数'
        },
        {
          id: 2,
          width: 160,
          name: '注册时间'
        },
        {
          id: 3,
          width: 100,
          name: '彩票返点'
        },
        {
          id: 4,
          width: 100,
          name: 'AG返点'
        },
        {
          id: 5,
          width: 100,
          name: '皇冠返点'
        },
        {
          id: 6,
          width: 100,
          name: '分红'
        },
        {
          id: 7,
          width: 100,
          name: '日工资'
        },
        {
          id: 8,
          width: 100,
          name: '个人余额'
        },
        {
          id: 9,
          width: 120,
          name: '团队余额'
        },
        {
          id: 10,
          width: 180,
          name: '最后登陆/状态'
        }
      ],
      showEditor: false,
      searchContent: ''
    }
  },
  created() {
    console.log(this.members)
  },
  methods:{
    // pc头部导航
    updateActiveIndex(index) {
      this.activeIndex = index
    },
    // pc团队个人 
    updateABTabIndex(index) {
      this.activeSwitchIndex = index
    },
    // pc最近几天
    updateRecentIndex(index) {
      this.activeRecentIndex = index
    },
    formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    handleLoadMore() {
      this.page++
    },
    formatterPercent(value) {
      let numStr = (value * 100).toString()
      let ret = numStr.length < 4 ? numStr + '0' + '%' : numStr.slice(0,4) + '%'
      return ret 
    },
    handleMouseEnter(index) {
      this.currentRowIndex = index
      this.currentMemberDetail = this.members[index]
    },
    handleMouseLeave() {
      this.currentRowIndex = -1
    },
    width(width) {
      return `width:${width}px`
    },
    showMemberEditor(index) {
      this.showEditor = true
      this.currentMemberDetail = this.members[index]
    },
    hideMemberEditor() {
      this.showEditor = false 
    },
    //编辑后的会员数据
    updateNewData(newData) {
      this.showEditor = false 
    },
    updateSearchContent(value) {
      this.searchCotent = value 
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    members() {
      let members = [this.getUserInfo, ...this.getUserInfo.members]
      return members
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .billboard-adjust >>> .content 
      margin-bottom 0 !important
    .billboard-adjust >>> .bg-bar 
      width 101% !important
    .billboard-adjust  
      margin 0 12px
    .member-manage 
      width 100%
      .pickers 
        // height 48px
        display flex
        align-items center
        box-sizing border-box 
        padding 10px 20px 0 20px
        background #fff
        .tab-switch 
          margin-right 20px
        .dropdown-picker 
          margin-right 10px
        .search-wrapper 
          flex 1
          display flex 
          justify-content flex-end
        .search-wrapper >>> .dropdown-picker 
          width 190px 
          margin-right 0
          .lottery-name 
            width 155px 
            input 
              width 155px 
              box-sizing border-box 
              padding-left 10px 
              outline none
              background none
      .account-info 
        width 100%
        padding 12px 25px
        box-sizing border-box
        background #faf8f8
        align-items center
        .billboard-content 
          width 100% 
          display flex
          height 45px
          background #fff
          padding 15px 0
          .item 
            width 33.33% 
            display flex 
            flex-direction column 
            justify-content center
            box-sizing border-box 
            .title 
              margin-bottom 10px
              color $color-sub-grey
            .statistics
              display inline-block
              span 
                font-size 15px
              .extra 
                display inline-block
                font-size 10px
              &.amount 
                color $color-primary-green
              &.bonus
                color $color-theme-red
              &.profit 
                color $color-theme-red
      .orders  
        .load-more 
          height 60px 
          line-height 60px 
          text-align center
        tr 
          // border-bottom 1px solid $color-divide-line
          background $color-text-button
          &.active
            font-size 20px
            background #fff
            box-shadow 0 0px 6px #ccc
        th 
          background #e7e0dd
          height 40px 
          vertical-align middle
          font-weight 700
          text-align left
          box-sizing border-box 
          padding-left 20px
        td  
          box-sizing border-box 
          padding-left 20px 
          vertical-align middle 
          height 40px
          border-bottom 1px solid $color-divide-line
          &.relative 
            position relative 
            padding-right 20px
            .popover 
              position absolute 
              width 460px
              height 160px 
              background rgba(0, 0, 0, 0.8)
              left -100%
              bottom 40px 
              z-index 1000
              &:after
                content ''
                display block
                width 0
                height 0
                position absolute 
                border 8px dashed rgba(0,0,0,0.8) 
                border-color rgba(0,0,0,0.8)  transparent transparent transparent  
                left 50%
                transform translateX(-50%)
                bottom -16px 
              .contents 
                box-sizing border-box  
                padding 10px
                .content 
                  font-size 0
                  .item 
                    display inline-block
                    color #fff
                    width 50%
                    line-height 24px
                    font-size 14px
                    .red  
                      color $color-theme-red 
                    .name 
                      display inline-block
                      color $color-sub-grey
                      min-width 70px
                      font-size 14px
                    .detail 
                      font-size 14px
            .editor 
              width 32px 
              height 32px 
              border-radius 50% 
              position absolute 
              background #009ae0
              right 3px
              top 3px
              .iconfont 
                font-size 32px
                color #fff
          .highlight 
            margin-left 5px
          .red 
            color $color-theme-red 
</style>